<template>
  <el-dialog
    ref="refDlg"
    :title="`${detailData.id?'编辑':'新增'}`"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="700px"
    @close="closeDialog"
  >

    <el-form ref="refForm" :rules="formRules" :model="formData" size="mini" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="分析品类:" prop="category">
            <el-select v-model="formData.category" :disabled="!!detailData.id" placeholder="请选择分析品类" style="width:100%">
              <el-option
                v-for="item in zoneDivisionList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系列:" prop="series">
            <el-select v-model="formData.series" :disabled="!!detailData.id" placeholder="请选择系列" style="width:100%">
              <el-option
                v-for="item in seriesList"
                :key="item.dictCode"
                :disabled="item.dictCode===formData.firstCategory||item.dictCode===formData.secondCategory"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="一级类别:" size="mini" prop="firstCategory">
            <el-select v-model="formData.firstCategory" :disabled="!!detailData.id" placeholder="请选择一级类别" style="width:100%">
              <el-option
                v-for="item in seriesList"
                :key="item.dictCode"
                :disabled="item.dictCode===formData.series||item.dictCode===formData.secondCategory"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="二级类别:" prop="secondCategory">
            <el-select v-model="formData.secondCategory" :disabled="!!detailData.id" placeholder="请选择二级类别" style="width:100%">
              <el-option
                v-for="item in seriesList"
                :key="item.dictCode"
                :disabled="item.dictCode===formData.firstCategory||item.dictCode===formData.series"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="查询组织:" size="mini">
            <el-select v-model="formData.shopCode" placeholder="请选择查询组织" style="width:100%">
              <el-option
                v-for="item in shopList"
                :key="item.shopCode"
                :label="item.shopName"
                :value="item.shopCode"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="取数时间:" prop="month">
            <el-date-picker
              v-model="formData.month"
              :disabled="!!detailData.id"
              type="monthrange"
              value-format="yyyy-MM"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            />
            <!-- value-format="yyyy-MM-dd HH:mm:ss" -->
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button size="mini" :loading="submiting" type="primary" @click="submitForm">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { monthRange } from '@/utils'
import { getShopList } from '@/api/display/salesData'
import { saveIndexData, queryIndexDetail } from '@/api/display/spec'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'EditForm',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      formRules: {},
      monthRange,
      zoneDivisionList: [],
      seriesList: [],
      shopList: [],
      submiting: false,
      formData: {
        category: '',
        firstCategory: '',
        id: '',
        month: ['', ''],
        secondCategory: '',
        series: '',
        shopCode: '',
        shopName: ''
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async created() {
    if (this.detailData.id) {
      queryIndexDetail(this.detailData.id).then(res => {
        if (res.success) {
          this.formData = { ...this.formData, ...res.data }
          const key1 = this.formData.month.substring(0, this.formData.month.indexOf(',')) || ''
          const key2 = this.formData.month.substring(this.formData.month.lastIndexOf(',') + 1) || ''
          this.formData.month = [key1 || '', key2 || '']
        }
      })
    }
    const { DISP_SERIES, ZONE_DIVISION } = await getDictByPatchType(['DISP_SERIES', 'ZONE_DIVISION'])
    this.seriesList = DISP_SERIES
    this.zoneDivisionList = ZONE_DIVISION
    getShopList().then(res => {
      if (res.success && res.data.length > 0) {
        this.shopList = res.data
      }
    })
  },

  methods: {

    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.formData = {}
      done && done()
    },
    // 提交表单处理
    submitForm() {
      if (this.submiting) return
      const temp = this.shopList.filter(v => v.shopCode === this.formData.shopCode)
      if (temp.length) this.formData.shopName = temp[0].shopName
      let data = {}
      const date = monthRange(this.formData.month[0], this.formData.month[1])
      if (!this.detailData.id) {
        this.formData.month = date.join(',')
        data = this.formData
      } else {
        data = { id: this.detailData.id,
          shopCode: this.formData.shopCode,
          shopName: this.formData.shopName
          // month: date.join(',')
        }
      }
      this.submiting = true
      saveIndexData(data).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.closeDialog()
          this.submiting = false
          this.$emit('success')
        }
      }).catch(() => {
        this.submiting = false
      })
    }
  }
}
</script>
<style lang='scss' scoped>
// 禁用颜色
/deep/.el-radio__input.is-disabled.is-checked .el-radio__inner{
 background-color: #9d9fa1;
}
/deep/.el-textarea.is-disabled .el-textarea__inner{
  color: #606266;
}
/deep/.el-input.is-disabled .el-input__inner {
  color: #606266;
}
</style>
